<script setup lang="ts">
import {ref} from 'vue'
import {showSuccessToast, showToast} from 'vant'
import { mobileRules,passwordRules,codeRules } from '@/utils/rules'

//导入接口
import {loginByPassword,sendCodeAPI,loginByCodeAPI} from '@/api/user'

import { useUserStore } from '@/stores'
import { useRoute, useRouter } from 'vue-router'

const store  = useUserStore()
const route = useRoute()//不带·r获取当前路由的信息
const router = useRouter()//有带r的是操作路由

const mobile=ref<string>('13230000080')
const password=ref<string>("abc12345")
const code = ref<string>('')
const agree=ref(false)
const login = async()=>{
    // console.log("登陆成功")
    if(!agree.value) return showToast("请勾选同意")

    if(isPassword.value){
      const res = await loginByPassword(mobile.value,password.value)
      // const {data}=res
      store.setUser(res.data)
      // console.log(res.data.data)
    }else{
      const res = await loginByCodeAPI(mobile.value,code.value)
      store.setUser(res.data)
    }

    // //登录部分
    // //调用接口进行登录，如果登录成功跳到首页，否则提示登陆失败
    // const res = await loginByPassword(mobile.value,password.value)

    // store.setUser(res.data)
    showSuccessToast("登录成功")
    //如果登录地址带有回跳地址的应该跳回那个地址，没有的话跳到首页
    router.push((route.query.returnUrl as string)||'/')
}

//发送验证码：发送验证码之后在开启倒计时,当倒计时归零应该停止
//有倒计时：如果倒计时没有归零验证码不能被发送
//当倒计时归零后调用验证码发送接口进行发送
  const time = ref(0)
  const send= async()=>{

    const res = await sendCodeAPI(mobile.value,'login')
    // console.log(res.data)
    if(time.value>0) return

    // console.log("发送验证码")
    time.value=60
    const timeId = window.setInterval(()=>{
      time.value--
      if(time.value==0) window.clearInterval(timeId)
    },1000)
  }

  const isPassword = ref(true)

  //控制输入密码眼睛的开关
  const show = ref(false)
</script>

<template>
    <div class="login-page">
        <cp-nav-bar
          right-text="注册"
          @click-right="$router.push('/register')"
        ></cp-nav-bar>
        <!-- 头部 -->
        <div class="login-head">
          <h3>{{ isPassword?"密码登录":"短信验证码登录" }}</h3>
          <a href="javascript:;">
            <span @click="isPassword=!isPassword">{{ !isPassword?"密码登录":"短信验证码登录" }}</span>
            <van-icon name="arrow"></van-icon>
          </a>
        </div>
        <!-- 表单 -->
        <van-form autocomplete="off" @submit="login">
          <van-field 
          placeholder="请输入手机号" 
          type="tel"
          v-model="mobile" 
          :rules="mobileRules"></van-field>
          <van-field v-if="isPassword"
          placeholder="请输入密码" 
          :type="show?'text':'password'" 
          v-model="password" 
          :rules="passwordRules"
          >
          <template #button>
             <cp-icon @click="show=!show" :name="`login-eye-${show?'on':'off'}`"></cp-icon>
          </template>
          </van-field>

          <van-field v-else
          :rules="codeRules"
          v-model="code"
          placeholder="请输入验证码" 
          type="text">
          <template #button>
            <span class="btn-send" @click="send">{{ time >0 ?time+'秒后发送验证码':"验证码" }}</span>
         </template>
         </van-field>
          <div class="cp-cell">
            <van-checkbox v-model="agree">
              <span>我已同意</span>
              <a href="javascript:;">用户协议</a>
              <span>及</span>
              <a href="javascript:;">隐私条款</a>
            </van-checkbox>
          </div>
          <div class="cp-cell">
            <van-button block round type="primary" native-type="submit">登 录</van-button>
          </div>
          <div class="cp-cell">
            <a href="javascript:;">忘记密码？</a>
          </div>
        </van-form>
        <!-- 底部 -->
        <div class="login-other">
          <van-divider>第三方登录</van-divider>
          <div class="icon">
            <img src="/src/assets/qq.jpg" alt="" />
          </div>
        </div>
      </div>
</template>
<style lang="scss" scoped>
.login {
    &-page {
      padding-top: 46px;
    }
    &-head {
      display: flex;
      padding: 30px 30px 50px;
      justify-content: space-between;
      align-items: flex-end;
      line-height: 1;
      h3 {
        font-weight: normal;
        font-size: 24px;
      }
      a {
        font-size: 15px;
      }
    }
    &-other {
      margin-top: 60px;
      padding: 0 30px;
      .icon {
        display: flex;
        justify-content: center;
        img {
          width: 36px;
          height: 36px;
          padding: 4px;
        }
      }
    }
  }
  .van-form {
    padding: 0 14px;
    .cp-cell {
      height: 52px;
      line-height: 24px;
      padding: 14px 16px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      .van-checkbox {
        a {
          color: var(--cp-primary);
          padding: 0 5px;
        }
      }
    }
    .btn-send {
      color: var(--cp-primary);
      &.active {
        color: rgba(22,194,163,0.5);
      }
    }
  }
</style>
